<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my-img-list li{
            min-height: 300px;
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div style="height:800px">

        </div>
    <ul id="my-img-list">
        <li>
            <img data-src="./img/83801.jpg" alt="">
        </li>
        <li>
            <img data-src="./img/83802.jpg" alt="">
        </li>
        <li>
            <img data-src="./img/83803.jpg" alt="">
        </li>
    </ul>

    <script>
             /** 图片懒加载
         1.使用滚动监听：通过滚动时，计算图片和顶部的距离，
            如果小于当前的可视化窗口，则加载图片
        好处：兼容性好，基本所有浏览器都能用
        坏处：代码太多，scroll会执行次数太多，影响性能
        2.通过observer intersectionObserver方式
        好处：代码少，性能好
        坏处：兼容性不是那么全面，但是可以忽略不计
        **/

        function setImgSrc(img){
           
            img.src=img?.dataset?.src || '';
        }
    </script>
    <!-- <script>

        // 方法1 使用滚动监听

        const imgs=document.querySelectorAll('#my-img-list img'); //nodelist对象
       
        console.log(Array.from(imgs).filter(x=>x.src!='').length,imgs.length)
        // const imgs=listEle.querySelector('');
        const innerHeight=window.innerHeight;
        // console.log("innerHeight",innerHeight)
        // console.log(imgs,typeof(imgs))
        // for(img in imgs){
        //     console.log(imgs[img])
        // }
        // for(img of imgs){
        //     console.log(img,img.getAttribute('data-src'))
        // }
        // imgs.forEach(element => {
        //     console.log(element.src)
        // });
        function lazyLoadImg(){
            // console.log(this)
            console.log('lazyLoadImg')
            if(!isLoadedAll(imgs)){
                for(img of imgs){
                const imgSrc=img.dataset.src
                
                const top=img.getBoundingClientRect().top
                // console.log('top',top,imgSrc)
                if(top<innerHeight && img.src ===''){
                   
                    img.src=imgSrc
                    // console.log('看到了',imgSrc,img.src)
                }
               
                }
            }else{
                console.log('已经加载完了')
                // 销毁自己，销毁自己不会影响其它已绑定的事件
                window.removeEventListener('scroll',lazyLoadImg)
            }
           

        }

        window.addEventListener('scroll',lazyLoadImg)
        window.addEventListener('scroll',()=>{
                console.log('让子弹飞一会');
         })
        // 检查是否全部图片已加载
        function isLoadedAll(imgs){
            console.log(Array.from(imgs).filter(x=>x.src!='').length, imgs.length)
            return Array.from(imgs).filter(x=>x.src!='').length===imgs.length;
        }
    </script> -->

    <script>
        // 方法2 使用observer
        const options={
            root:null,
            rootMargin:'0px',
            threshold:1
        }
        const observer=new IntersectionObserver(callback,options)
         function callback(entries){
            entries.forEach(entry => {
                // 看到了
                if(entry.isIntersecting){
                    const img=entry.target;
                    setImgSrc(img)
                    console.log('loading')
                    // 注销观察
                    observer.unobserve(img)
                }
            })
         }
         const targets = document.querySelectorAll('#my-img-list img');
         targets.forEach(target => {
            observer.observe(target);
         });
    </script>
</body>
</html>